<template>
	<!--前端用户注册管理-->
	<div class="container-app">
		<div style="margin-bottom:15px;">
			<el-button v-if="hasAdd" size="small" type="success" @click="addLine"><i class="el-icon-plus"></i>{{addTitle}}</el-button>
			<el-button v-if="hasDel" size="small" type="danger" @click="removeLine"><i class="el-icon-delete"></i>{{delTitle}}</el-button>
			<el-button v-if="hasUpdate" size="small" type="primary" @click="changeLine"><i class="el-icon-edit-outline"></i>{{updateTitle}}</el-button>
			<span class="left-search">
	       <!-- <el-input @change="findLine" v-model="findData" class="listinput" size="small" placeholder="输入关键字搜索" style="width:300px;">
	          <el-button @click="findLine" slot="append" icon="el-icon-search"></el-button>
	        </el-input>
	        <el-button @click="resetLine" size="mini"><i class="el-icon-refresh"></i>重置</el-button>-->
	      </span>
		</div>
		<!--酒定价信息管理列表-->
		<el-table @selection-change="getRow" :data="tableData" tooltip-effect="dark" style="width: 100%" border v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
			<el-table-column type="selection" width="55"></el-table-column>
			<!--<el-table-column prop="userName" label="用户名称"></el-table-column>-->
			<el-table-column prop="userTel" label="手机号码"></el-table-column>
			<!--<el-table-column prop="userRealName" label="真实姓名"></el-table-column>
			<el-table-column prop="cardId" label="身份证号"></el-table-column>-->
			<el-table-column prop="userType" label="用户类型">
				<template slot-scope="scope">{{scope.row.userType | formatuserType}}</template>
			</el-table-column>
			<el-table-column prop="auditStatus" label="审核状态">
				<template slot-scope="scope">
					<span v-if="scope.row.auditStatus == 0" style="color: red;">未审核</span>
					<span v-else-if="scope.row.auditStatus == 1" style="color: green;">通过</span>
					<span v-else-if="scope.row.auditStatus == 2" style="color: #de8a09;">不通过</span>
					<span v-else></span>
				</template>
			</el-table-column>
			<el-table-column prop="lastLoginTime" label="最后登录时间" width="160"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
			<el-table-column label="操作" width="220">
				<template slot-scope="scope">
					<!--<el-button type="success" size="mini" @click="viewLine(scope.row)">
						<i class="el-icon-check"></i> 查看详情
					</el-button>-->
					<el-button v-if="hasCheck" size="small" type="primary" @click="checkLine(scope.row)"><i class="el-icon-plus"></i>{{checkTitle}}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="paging">
			<span>总条数：{{dataTotal}}</span>
			<el-pagination @current-change="changePage" :page-size="10" :total="dataTotal" background layout="prev, pager, next" style="float:right;"></el-pagination>
		</el-col>
		<!--查看详情-->
		<el-dialog title="前端用户信息" :visible.sync="isDetails" width="60%" :before-close="handleClose" :close-on-click-modal='false'>
			<el-form size="small" :model="ruleForm" ref="ruleForm" label-width="120px" class="form-submit">
				<!--<el-form-item label="用户名称：" prop="userName">
					<el-input size="small" v-model="ruleForm.userName" readonly></el-input>
				</el-form-item>-->
				<el-form-item label="手机号码：" prop="userTel">
					<el-input size="small" v-model="ruleForm.userTel" readonly></el-input>
				</el-form-item>
				<!--<el-form-item label="真实姓名：" prop="userRealName">
					<el-input size="small" v-model="ruleForm.userRealName" readonly></el-input>
				</el-form-item>
				<el-form-item label="身份证号码：" prop="cardId">
					<el-input size="small" v-model="ruleForm.cardId" readonly></el-input>
				</el-form-item>-->
				<el-form-item label="用户类型：" prop="userTypeName">
					<el-input size="small" v-model="ruleForm.userTypeName" readonly></el-input>
				</el-form-item>
				<el-form-item label="审核状态：" prop="auditStatus">
					<el-input size="small" v-model="ruleForm.auditStatus" readonly></el-input>
				</el-form-item>
				<el-form-item label="最后登录时间：" prop="lastLoginTime">
					<el-input size="small" v-model="ruleForm.lastLoginTime" readonly></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" style="padding-right:30px;">
        <el-button size="small" @click="cancleForm('ruleForm')">关闭</el-button>
      </span>
		</el-dialog>
	</div>
</template>

<script>
	import {      
		getserver,
		postserver
	} from '@/api/basicFunction'
	export default {
		data() {
			return {
				inputVisible: false,
				inputValue: '',
				isDetails: false,
				loading: true,
				isUsable: 1,
				changeVisible: true,
				selectData: [],
				dataPage: 1,
				dataTotal: 1,
				tableData: [],
				ruleForm: {
					id: '',
					userName: '',
					userTel: '',
					userRealName: '',
					cardId: '',
					userType: '',
					userTypeName: '',
					auditStatus: '',
					lastLoginTime: ''
				},
				removeIds: [],
				selectId: '',
				isAdd: true,
				findData: '',
				hasAdd: false,
				hasDel: false,
				hasUpdate: false,
				hasCheck: false,
				addTitle: '新增',
				updateTitle: '修改',
				delTitle: '删除',
				checkTitle: '审核'
			}
		},
		filters: {
			formatuserType(value) {
				if(value == '1'){
					return '个人'
				}else if(value == '2'){
					return '学校'
				}else if(value == '3'){
					return '企业'
				}else if(value == '4'){
					return '科研机构'
				}else if(value == '5'){
					return '其他'
				}else {
					return ''
				}
			}
		},
		mounted() {
			this.getPageList()
			this.getJur()
		},
		methods: {
			getJur() {
				const self = this
				self.$store.dispatch('Juage', self.$store.clickMenuId).then(res => {
					if(res.code == '200') {
						res.data.forEach(item => {
							if(item.type == '3') {
								self.hasAdd = true
								self.addTitle = item.title
							}
							if(item.type == '5') {
								self.hasDel = true
								self.delTitle = item.title
							}
							if(item.type == '4') {
								self.hasUpdate = true
								self.updateTitle = item.title
							}
							if(item.type == '7') {
								self.hasCheck = true
								self.checkTitle = item.title
							}
						})
					} else if(res.code !== '507') {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})
			},
			getPageList() {
				const para = {
					pageIndex: this.dataPage,
					pageSize: 10
				}
				getserver(para, "/clientUser/getPageList").then(res => {
					if(res.code == '200') {
						this.loading = false
						this.dataTotal = res.data.total
						this.tableData = res.data.records
						console.log(this.tableData)
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})
			},
			getwineinfoList() {
				getserver({}, "/wWineinfo/getAllWineInfo").then(res => {
					if(res.code == '200') {
						this.wineinfoList = res.data
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})
			},
			getdealersListList() {
				getserver({}, "/wDealers/getAllDealers").then(res => {
					if(res.code == '200') {
						this.dealersList = res.data
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})
			},
			changePage(val) {
				this.dataPage = val
				this.getPageList()
			},
			handleClose() {
				this.isDialog = false
				this.isDetails = false
			},
			storechain() {
				const self = this;
				storechain(self)
			},
			submitForm(formName) {
				const self = this
				self.$refs[formName].validate((valid) => {
					if(valid) {
						let para = self.ruleForm
						delete para.dName
						delete para.sku
						delete para.code
						delete para.sUnit
						if(self.isAdd) {
							//添加信息
							postserver(para, "/wPricing/add").then(res => {
								if(res.code == '200') {
									this.$message({
										type: 'success',
										message: res.message
									})
									this.getPageList()
								} else {
									this.$message({
										type: 'error',
										message: res.message
									})
								}
								self.isDialog = false
								this.$refs[formName].resetFields()
							})
						} else {
							para.id = parseInt(self.selectId)
							//修改信息
							postserver(para, "/wPricing/update").then(res => {
								if(res.code == '200') {
									this.$message({
										type: 'success',
										message: res.message
									})
									this.getPageList()
								} else {
									this.$message({
										type: 'error',
										message: res.message
									})
								}
								self.isDialog = false
								this.$refs[formName].resetFields()
							})
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields()
				//this.restData()
			},
			cancleForm(formName) {
				this.$refs[formName].resetFields()
				this.isDialog = false
				this.isDetails = false
			},
			removeLine() {
				if(this.selectData.length) {
					this.$confirm('删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						const para = {
							ids: this.removeIds.toString()
						}
						postserver(para, "/wPricing/delete").then(res => {
							if(res.code == '200') {
								this.$message({
									type: 'success',
									message: res.message
								})
								this.getPageList()
							} else {
								this.$message({
									type: 'success',
									message: res.message
								})
							}
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
				} else {
					this.$message('请先选择需要删除的信息！')
				}
			},
			restData() {
				const self = this
				self.ruleForm.id = ''
				self.ruleForm.userName = ''
				self.ruleForm.userTel = ''
				self.ruleForm.userRealName = ''
				self.ruleForm.cardId = ''
				self.ruleForm.userType = ''
				self.ruleForm.userTypeName = ''
				self.ruleForm.auditStatus = ''
				self.ruleForm.lastLoginTime = ''
			},
			addLine() {
				const self = this
				self.title = '新增酒定价信息'
				self.isDialog = true
				self.changeVisible = true
				self.isAdd = true
				self.isWine = false
				self.restData()
			},
			changeLine() {
				const self = this
				if(self.selectData.length && self.selectData.length === 1) {
					self.isAdd = false
					self.title = '修改酒定价信息'
					self.isDialog = true
					self.changeVisible = false
					self.isWine = false
					
					self.ruleForm.id = self.selectData[0].id
					self.ruleForm.userName = self.selectData[0].userName
					self.ruleForm.userTel = self.selectData[0].userTel
					self.ruleForm.userRealName = self.selectData[0].userRealName
					self.ruleForm.cardId = self.selectData[0].cardId
					self.ruleForm.userType = self.selectData[0].userType
					self.ruleForm.userTypeName = self.selectData[0].userTypeName
					self.ruleForm.auditStatus = self.selectData[0].auditStatus
					self.ruleForm.lastLoginTime = self.selectData[0].lastLoginTime
				
					self.selectId = self.selectData[0].id
				} else {
					self.$message('请选择一条信息进行修改！')
				}
			},
			getRow(selection) {
				const self = this
				self.removeIds = []
				self.selectData = selection
				selection.forEach(item => {
					self.removeIds.push(item.id)
				})
			},
			findLine() {
				//let keyword = encodeURIComponent(this.findData)
				const para = {
					row: 10,
					page: 1,
					keyword: this.findData
				}
				this.loading = true
				//关键字搜索行
				postserver(para, "/clientUser/getPageList").then(res => {
					if(res.code == '200') {
						this.loading = false
						this.dataTotal = res.data.total
						this.tableData = res.data.records
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})
			},
			resetLine() {
				this.findData = ''
			},
			viewLine(obj) {
				const self = this
				self.isDetails = true
				self.ruleForm.id = obj.id
				self.ruleForm.userName = obj.userName
				self.ruleForm.userTel = obj.userTel
				self.ruleForm.userRealName = obj.userRealName
				self.ruleForm.cardId = obj.cardId
				self.ruleForm.userTypeName = self.$options.filters['formatuserType'](obj.userType)
				if(obj.auditStatus ==1){
					self.ruleForm.auditStatus = '通过'
				}else if(obj.auditStatus ==0){
					self.ruleForm.auditStatus = '未审核'
				}else 
					self.ruleForm.auditStatus = obj.auditStatus
				self.ruleForm.lastLoginTime = obj.lastLoginTime
				
				self.selectId = obj.id
			},
			checkLine(obj){console.log(obj,'check')
				if(obj.auditStatus == 1){
					this.$message('当前用户已审核通过！')
				}else{
					this.$confirm('审核该用户, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						const para = {
							id: obj.id
						}
						postserver(para, "/clientUser/check").then(res => {
							if(res.code == '200') {
								this.$message({
									type: 'success',
									message: res.message
								})
								this.getPageList()
							} else {
								this.$message({
									type: 'success',
									message: res.message
								})
							}
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消审核'
						})
					})
				}
			}
		}
	}
</script>

<style scoped>
	.paging {
		padding: 15px;
		padding-right: 0;
	}
	
	.form-submit {
		margin: 0;
		padding-right: 30px;
	}
	
	.el-dialog__header {
		text-align: center;
	}
	.tree-box{
		height: 180px;
	    overflow: auto;
	    z-index: 999;
	    width: 100%;
	}
	.el-tree{
		min-height: 120px;
	}
	.tree-box{
		padding: 20px;
	    border: 1px solid #dedede;
	    position: absolute;
	    z-index: 999;
	    width: 100%;
	    background: #f1f1f1;
	    margin-top: 10px;
    }
    .tree-box div.triangle{
    	width: 0;
	    height: 0;
	    border-width: 10px;
	    border-style: solid;
	    border-color: transparent transparent #f1f1f1 transparent;
	    font-size: 0;
	    line-height: 0;
	    position: absolute;
	    top: -20px;
    }
</style>